<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务清单</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="./taskList.css">
</head>
<style>
    .v-enter-from,
    .v-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s linear;
    }

    /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
    .v-leave-active {
        position: absolute;
    }
</style>

<body>
    <div id="app">
    </div>
    <template id="root">
        <h2>任务清单</h2>
        <span class="input">
            <input type="text" v-model="taskName"><button @click="addTask">添加任务</button>
        </span>
        <doing-component :doing-list="doingList" @complete-task="handleComplete"></doing-component>
        <done-component :done-list="doneList" @remove-task="handleRemove" @remove-all-task="handleRemoveAll"></done-component>
    </template>
    <template id="doing">
        <div class="list">
            <p>未完成任务</p>
            <transition-group tag="ul">
                <li v-for="item in doingList" :key="item">{{item}}<button @click="completeTask(item)">完成</button></li>
            </transition-group>
        </div>
    </template>
    <template id="done">
        <div class="list">
            <p>已完成任务</p>
            <transition-group tag="ul">
                <li v-for="item in doneList" :key="item">{{item}}<button @click="removeTask(item)">删除</button></li>
                <span class="clear"><button @click="removeTaskAll()">清空</button></span>
            </transition-group>
        </div>
    </template>
</body>
<script>
    const { ref, reactive, emit } = Vue
    //应用实例
    const app = Vue.createApp({
        template: "#root",
        setup(props, { emit }) {
            const taskName = ref('')
            const doingList = ref([])
            const doneList = ref([])
            const addTask = () => {
                doingList.value.push(taskName.value)
            }
            const handleComplete = (item) => {
                doneList.value.push(item)
                doingList.value.splice(doingList.value.indexOf(item), 1)
            }
            const handleRemove = (item) => {
                doneList.value.splice(doneList.value.indexOf(item), 1)
            }
            //清空完成列表
            const handleRemoveAll = ()=>{
                doneList.value = []
            }
            return {
                taskName, doingList, doneList, addTask, handleComplete, handleRemove,handleRemoveAll
            }
        }
    })
    app.component('doingComponent', {
        template: '#doing',
        props: {
            doingList: Array
        },
        setup(props, { emit }) {
            const completeTask = (item) => {
                emit('completeTask', item)
            }
            return {
                completeTask
            }
        }
    })
    app.component('doneComponent', {
        template: '#done',
        props: {
            doneList: Array
        },
        setup(props, { emit }) {
            const removeTask = (item) => {
                emit('removeTask', item)
            }
            const removeTaskAll = () => {
                emit('removeAllTask')
            }
            return {
                removeTask,removeTaskAll
            }
        }
    })
    app.mount("#app")
</script>

</html>